<template>
  <view class="goods-shelves" :style="`--color-background:${props.backgroundColor}`">
    <c-img class="shelves-img" mode="widthFix" v-if="props.backgroundImage" :src="props.backgroundImage"></c-img>
    <scroll-view class="goods-shelves-wrap" scroll-x>
      <view class="goods-flex flex">
        <view class="goods-shelves-box" v-for="(item, i) in props.data" :key="i">
          <c-img class="goods-img" :src="items[i]?.smallImg" @tap="toGoods(item)"></c-img>
          <view class="goods-body" @tap="toGoods(item)">
            <view class="goods-name row1">{{ items[i]?.goodsName }}</view>
            <view class="flex al-center">
              <view class="goods-price grow">
                <c-number :value="items[i]?.minPrice" class="color-danger bold" prefix="￥" />
                <!-- <c-number :value="items[i]?.msrp" :prefix-mini="false" class="color-gray mini text-del" prefix="￥" /> -->
              </view>
              <!-- <view class="cart">
                <c-icon icon="login"></c-icon>
              </view> -->
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import api from '@/api';
import { ref, onMounted } from 'vue';
import { CImg, CNumber, CIcon } from '@/components';
import { View, ScrollView } from '@tarojs/components';
import { useRouter } from '@/hooks';

const props = defineProps({
  backgroundColor: String,
  backgroundImage: String,
  data: Array
});
const router = useRouter();
const items = ref([]);

const toGoods = id => {
  router.push('/pages/goods/info?id=' + id);
};
onMounted(() => {
  api.goods.goodsEcho({ ids: props.data }).then(data => {
    items.value = data;
  });
});
</script>
<style lang="scss">
.goods-shelves {
  margin: 20px 20px 20px;
  border-radius: 10px;
  height: 690px;
  overflow: hidden;
  position: relative;
  background-color: var(--color-background);
  .shelves-img {
    max-height: 690px;
    width: 100%;
    margin-bottom: -20px;
  }
  .shelves-swiper-item {
    width: 200px !important;
  }
  .goods-shelves-wrap {
    height: 390px;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 2;
    .goods-flex {
      height: 100%;
      padding: 15px;
    }
  }
  .goods-shelves-box {
    height: 100%;
    width: 260px;
    margin-right: 15rpx;
    border-radius: 15rpx;
    background-color: var(--color-caption);
    overflow: hidden;
    .goods-img {
      width: 260px;
      height: 260px;
    }
    .goods-body {
      padding: 14px 20px 16px;
      .cart {
        padding: 10px 0 10px 20px;
      }
      .goods-name {
        margin-bottom: 10px;
        font-size: 24px;
      }
      .goods-price {
        font-size: 32px;
      }
      .mini {
        font-size: 24px;
      }
    }
  }
}
</style>
